<template>
	<view>
		<input v-model="ipt" @confirm="SearchHeros" type="text" />
		<view class="items">
			<navigator v-for="item in heros" :url="`/pages/detail/detail?id=${item.heroId}`" class="item">
				<image :src="item.icon" mode=""></image>
				<text>{{ item.name }}</text>
			</navigator>
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue';
//定义+获取数据
const heros = ref([]);

const getData = async (q = '') => {
	const res = await uni.request({
		url: 'https://api-vue-base.itheima.net/api/lol/search',
		method: 'GET',
		data: {
			q
		}
	});
	// console.log(res.data.data);
	heros.value = res.data.data;
};
getData();
//搜索功能
const ipt = ref('');
const SearchHeros = () => {
	getData(ipt.value);
};
</script>

<style>
input {
	height: 80rpx;
	width: 100%;
	background-color: aquamarine;
}
.items {
	display: flex;
	flex-wrap: wrap;
}
.item {
	width: 25%;
	height: 280rpx;
	background: orange;
}
.item image {
	width: 100%;
	height: 200rpx;
}
.item text {
	display: block;
	text-align: center;
}
</style>
